<template>
  <div id="app">
    <nav-bar />
    <div class="Submit" v-cloak>
      <van-pull-refresh v-model="isRefresh" @refresh="onRefresh" :animation-duration="10" >

      <div v-if="recordList.total===0" style="text-align:center; margin:80px 0;">
        <img src="../../assets/nohistory.png" width='150px'>
        <p style='color: #a9a9a9;'>您当前还没有提交记录哦～</p>
      </div>
      <ul class="record-box" v-else>
        <li v-for="record in recordList.items" :key="record.user_id">
          <div><span>提交时间：</span><span>{{record.created_at}}</span></div>
          <div><span>支付方式：</span><span>{{record.pay_type}}</span></div>
          <div><span>支付金额：</span><span>{{record.price}}</span></div>
          <div><span>订单号：</span><span>{{record.pay_id}}</span></div>
          <div v-if='record.status===4'><span>审核状态：</span><span :class="'c-color'+record.status">{{statusArray[record.status]}}({{JSON.parse(record.extend).reason_failure}})</span></div>
          <div v-else><span>审核状态：</span><span :class="'c-color'+record.status">{{statusArray[record.status]}}</span></div>
        </li>
      </ul>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
  import {SwipeCell,Loading,Toast,PullRefresh,} from 'vant'
import NavBar from '@/components/customerService/NavBar.vue'
import {getappeal} from '@/api/customerService'


export default {
  components: {
    NavBar,
    [Loading.name]: Loading,
    [Toast.name]: Toast,
    [PullRefresh.name]: PullRefresh,
    [SwipeCell.name]: SwipeCell,
  },
  name: 'app',
  data(){
      return {
        isRefresh: false,
        recordList: {},
        statusArray: {
          0: '等待',1: '申诉中',2: '申诉成功',4: '申诉失败'
        }
      }
    },
  created(){
    this.getUnpayStatus()
  },
  methods: {

    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isRefresh = false;
        this.getUnpayStatus();
      }, 500);
    },
    getUnpayStatus(){
      getappeal({page: 1}).then(res => {
        if(res.status===0){
          this.recordList = res.data
        }
      })
    }
  }
}
</script>

<style lang='less'>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 50px;
  padding-bottom: 20px;
}
  .record-box {
    list-style: none;
      li {
      width: 90%;
      margin: 15px 5% 0 5%;
      background:url('../../assets/applyhistory.png') no-repeat;
      background-size:100% 100%;
      padding: 1px 0 10px 0;
      div {
        margin-top: 10px;
        margin-left: 10px;
        display: flex;
        color: #8a8a8a;
        span {
          width: 150px;
        }
        span:nth-of-type(2) {
          width: 100%;
        }
        .c-color0{
          color: #de9827;
        }
        .c-color1{
          color: #de9827;
        }
        .c-color2{
          color:green;
        }
        .c-color4{
          color:red;
        }
      }
    }
  }
</style>
